<script setup lang="ts">
import { reactive, ref, shallowRef } from 'vue';
import Draggable from "vuedraggable";
import { tmpList } from '../tmpList';

console.log(tmpList, 'list')

// import TheWelcome from "../components/TheWelcome.vue";
const layoutComponents = reactive([
  {
    name: "COLUMN",
    icon: "row.svg",
    direction: 'column',
    id: 0,
    props: {
      gutter: 10,
      grow: 1
    }
  },
  {
    name: "ROW",
    icon: "col.svg",
    direction: 'row',
    id: 1,
    props: {
      gutter: 10,
      grow: 1
    }
  }
])

const comms = tmpList.map((item, i) => {
  return {
    id: i,
    name: 'tmp' + (i + 1),
    tmp: item
  }
})
const commComponents = shallowRef(comms)
console.log("commComponents", commComponents)


const onEnd = (a, b) => {
  console.log(a, b)
}

const log = (evt) => {
  window.console.log(evt);
}

let idGlobal = 0;

const cloneLayout = (item) => {
  console.log(item, "cur")
  return {
    id: idGlobal++,
    name: item.name,
    type: 'layout',
    direction: item.direction,
    style: {
      flex: "1 0 0"
    },
    tasks: []
  };
}
const cloneTemp = (item) => {
  console.log(item, "cur")
  return {
    id: idGlobal++,
    name: item.name,
    type: 'tmp',
    style: {
      flex: "1 0 0"
    },
    titleStyle: {},
    descStyle: {},
    data: {
      title: "Best Cafe in Auckland",
      img: "/imgs/pic.svg",
      desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt neque neque, sed ullamcorper massa porttitor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt neque neque, sed ullamcorper massa porttitor sit amet",
      post: 0,
    }
  };
}
</script>

<template>
  <div>
    <div class="nav"><img class="ico" src="/imgs/layout.svg" /><span class="t-name">LAYOUT</span></div>
    <draggable class="list" v-model="layoutComponents" item-key="id"
      :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneLayout" @change="log" @end="onEnd">
      <template #item="{ element }">
        <div class="item">
          <img class="ico" :src="'/imgs/' + element.icon" /><span class="s-name">{{ element.name }}</span>
        </div>
      </template>
    </draggable>

    <div class="nav"><img class="ico" src="/imgs/card.svg" /><span class="t-name">TEMPLATE</span></div>
    <div class="tmp">
      <draggable class="list" v-model="commComponents" item-key="id"
        :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneTemp" @change="log" @end="onEnd">
        <template #item="{ element }">
          <component :is="element.tmp"></component>
        </template>
      </draggable>

    </div>

  </div>
</template>

<style lang="less" scoped>
.nav {
  background: #c8c8c8;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 2px 0;
}

.list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 10px;
}

.item {
  background: #f0f0f0;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: move;
  transition: all 300ms;
  &:hover{
    background: #d0d0d0;
  }
}

.ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.t-name {
  margin-left: 8px;
  font-size: 14px;
}
.s-name{
  margin-left: 8px;
  font-size: 12px;
}

.tmp {
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: move;
}
:deep(.temps){
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  &:hover{
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2);
  }
}
</style>
